<template>
  <div class="setting" v-loading="loading">
    <h3 class="title">服务器配置信息</h3>
    <el-form ref="refSettingForm" :model="settingForm" style="width: 50%;-webkit-app-region: no-drag; // 不可拖动">
      <el-form-item>
        <el-input v-model="settingForm.baseUrl" placeholder="后端HTTP服务地址">
          <template #prepend>
            <div style="width: 35px">http://</div>
          </template>
          <template #append>
            <el-button @click="resetHttpUrl">默认配置</el-button>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="settingForm.websocketUrl" placeholder="Websocket服务地址">
          <template #prepend>
            <div style="width: 35px">ws://</div>
          </template>
          <template #append>
            <el-button @click="resetWs">默认配置</el-button>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="settingForm.tcpUrl" placeholder="TCP服务地址">
          <template #prepend>
            <div style="width: 35px">IP:Port</div>
          </template>
          <template #append>
            <el-button @click="resetTcp">默认配置</el-button>
          </template>
        </el-input>
      </el-form-item>
      <div class="btn">
        <el-button @click="switchLogin" type="success">返回登录</el-button>
        <el-button type="primary" @click="saveSetting">保存配置</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import {defineComponent, onMounted, reactive, ref} from "vue";
import {StorageUtils} from "@/utils/StorageUtils";
import {DialogUtils} from "@/utils/DialogUtils";
import {ConfigUtils} from "@/utils/ConfigUtils";

export default defineComponent({
  name: "toSetting",
  setup(props, context) {
    const loading = ref(false);
    const settingForm = reactive({
      baseUrl: '',
      tcpUrl:'',
      websocketUrl: ''
    })
    const switchLogin = () => {
      context.emit('switchLogin');
    }

    const resetHttpUrl = () => {
      settingForm.baseUrl = 'localhost:10102';
    }

    const resetWs = () => {
      settingForm.websocketUrl = 'chasingxu.cn:10107';
    }

    const resetTcp = () => {
      settingForm.tcpUrl = 'chasingxu.cn:10107';
    }

    const saveSetting = () => {
      if (settingForm.baseUrl && settingForm.websocketUrl &&
          settingForm.baseUrl.length>0 && settingForm.websocketUrl.length>0 &&
          settingForm.tcpUrl && settingForm.tcpUrl.length > 0) {
        loading.value = true;
        /** 先进行测试看是否能够通信正常，才保存到cookie里面 未完成*/
        const config = {tcpUrl: '', baseUrl: '', websocketUrl: ''};
        config.tcpUrl = settingForm.tcpUrl;
        config.baseUrl = 'http://' + settingForm.baseUrl;
        config.websocketUrl = 'ws://' + settingForm.websocketUrl;
        StorageUtils.addStorage('request_api_address', JSON.stringify(config));
        DialogUtils.showMessageBox('提示', "地址配置成功", {type: 'success'}).then(()=>{
          setTimeout(()=> {
            switchLogin();
            ConfigUtils.readConfig();
            loading.value = false;
          }, 1000);
        }).catch((error) => {
          console.error(error);
          loading.value = false;
        });

      } else {
        DialogUtils.showErrorBox("错误提示", "请输入合法的地址信息...");
      }
    }

    onMounted(() => {
      StorageUtils.getStorage('request_api_address').then((data) => {
        const config = JSON.parse(data);
        if (config) {
          settingForm.baseUrl = config.baseUrl.replace('http://', '');
          settingForm.tcpUrl = config.tcpUrl;
          settingForm.websocketUrl = config.websocketUrl.replace('ws://','');
        }
      })
    })

    return {
      loading,
      settingForm,
      switchLogin,
      resetHttpUrl,
      resetWs,
      resetTcp,
      saveSetting
    }
  }
})
</script>

<style scoped lang="scss">
@import "src/styles/variable";
.setting {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  grid-template-rows: 1fr 1fr;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 10px;

  .title {
    color: $color-text-base;
  }

  .btn {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
}
</style>
